<template>
    <div class="container">
      <img class="signBGImg" crossOrigin="anonymous" :src="signBGImg" alt="">
      <div class="esign_container">
        <vue-esign ref="esignRef" :width="width" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"
          :lineColor="lineColor" v-model:bgColor="bgColor" :isClearBgColor="false" />
        <button v-if="isHideBtn" @click="handleReset">清空画板</button>
        <button v-if="isHideBtn" @click="handleGenerate">生成图片</button>
      </div>
    </div>
  
    <!-- <div>
      <img :src="resultImg" alt="">
    </div> -->
  </template>
  
  <style scoped>
  .container {
    position: relative;
  }
  
  .container,
  .signBGImg {
    width: 100%;
  }
  
  .esign_container {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  </style>
  
  <script setup lang="ts">
  import { ref, nextTick, onMounted } from 'vue';
  import vueEsign from 'vue-esign'
  import getPdf from '@/utils/htmlToPdf'
  import imgSrc1 from '@/assets/1.png'
  // console.log("🚀 ~ getPdf:", getPdf)
  let lineWidth = ref(6)
  let lineColor = ref('#000000')
  let bgColor = ref('rgba(0,0,0,0)')
  let resultImg = ref('')
  let signBGImg = ref('')
  let isCrop = ref(true)
  let isClearBgColor = ref(true)
  let esignRef = ref<any>(null)
  let isHideBtn = ref(true)
  let width = ref(800)
  width.value = document.body.clientWidth;
  // let isLoadImg = ref(false)
  let handleReset = () => {
    esignRef.value.reset()
  }
  let handleGenerate = () => {
    esignRef.value.generate().then((res: any) => {
      resultImg.value = res
      console.log("🚀 ~ esignRef.value?.generate ~ resultImg.value:", resultImg.value)
      isHideBtn.value = false
      nextTick(() => {
        getPdf()
      })
    }).catch((err: any) => {
      alert(err) // 画布没有签字时会执行这里 'Not Signned'
    })
  }
  const setIamge = () => {
    //下载图片地址和图片名
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function () {
      console.log(3333);
  
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let context = canvas.getContext("2d");
      context!.drawImage(image, 0, 0, image.width, image.height);
      signBGImg.value = canvas.toDataURL(); //得到图片的base64编码数据
      console.log("🚀 ~ setIamge ~ signBGImg.value:", signBGImg.value)
      // isLoadImg.value = true
    };
    image.src = imgSrc1;
    console.log(213);
  
  };
  onMounted(() => {
    setIamge();
  })
  
  </script>